<template>

<div class="container">
  <el-table
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    :data="data"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-table
            :data="props.row.prizegrades"
            stripe
            style="width: 100%">
            <el-table-column
              prop="grade"
              label="等奖">
              <template slot-scope="scope">{{ scope.row.grade | addCn }}</template>
            </el-table-column>
            <el-table-column
              prop="number"
              label="中奖人数">
              <template slot-scope="scope">{{ scope.row.number | easyNum }}</template>
            </el-table-column>
            <el-table-column
              prop="bonus"
              label="奖金(元)">
              <template slot-scope="scope">{{ scope.row.bonus | easyNum }}</template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="期数"
      prop="_id">
    </el-table-column>
    <el-table-column
      label="日期"
      prop="date">
    </el-table-column>
    <el-table-column 
    label="红球" 
    prop="red">
      <template slot-scope="scope">
        <span v-for="item in scope.row.red" :key="item.id"> {{item}} </span>
      </template>
    </el-table-column>
        <el-table-column
      label="蓝球"
      prop="blue">
    </el-table-column>
  </el-table>

  <el-row>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="count"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
    </el-pagination>
  </el-row>

</div>

</template>

<script>
import http from '../http'

export default {
  name: 'History',
  data () {
    return {
      page: 1, 
      count:10,
      total:0,
      data: [],
      loading: true
    }
  },
  methods: {
    getLotteries() {
      http.post(
        '/lottery/list', 
        {'page': this.page, 'count': this.count}).then(
          response => (
            this.data = response.data.data.data,
            this.total = response.data.data.total,
            this.loading = false)
      )
    },
    handleSizeChange(val) {
        this.count = val,
        this.getLotteries()
      },
      handleCurrentChange(val) {
        this.page = val,
        this.getLotteries()
      }
  },
  created () {
    this.getLotteries()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>